import axios from 'axios'
import React from 'react'
import { useLocation, useParams, useSearchParams } from 'react-router-dom'
import { Button } from 'react-vant'

const Index: React.FC = () => {
  // 方式一
  // const [searchParams] = useSearchParams();
  // const price = searchParams.get('price')

  // 方式二
  // const location = useLocation();
  // const price = location.state

  // 方式三
  const { price } = useParams()
  // 订单参数
  // const price = 100
  const title = '商品名称'
  const id = new Date().getTime()


  const pay = async () => {
    const resp = await axios.post('/api/payment', { id, title, price })
   
    window.location.href = resp.data.data
  }
  return (
    <div>
      <div>
        订单号： { id }
      </div>
      <div>
        订单标题： { title }
      </div>
      <div>
        订单金额： { price }
      </div>
      <Button type="primary" block onClick={() => pay()}>立即支付</Button>
    </div>
  )
}

export default Index